<template>
  <el-container class="">
    <el-header style="text-align: right; font-size: 12px">
      <div class="toolbar">
        <el-input v-model="sousuo"
                  style="width: 440px"
                  placeholder="输入宠物名字、ID或领养人姓名、联系方式"
                  prefix-icon="Search"
                  clearable />
        <p class="but sousuo"
           @click="search()">搜索</p>
        <p class="but sousuo"
           @click="chongzhi()">重置</p>

      </div>
    </el-header>

    <el-main>
      <el-scrollbar>
        <el-table :data="userlist"
                  empty-text="暂无数据">
          <el-table-column prop="pet_id"
                           label="宠物ID"
                           width="100" />
          <el-table-column label="宠物图片"
                           width="200">
            <template #default="scope">
              <img :src="scope.row.image"
                   alt="宠物图片"
                   style="width: 150px; height: 80px; ">
            </template>
          </el-table-column>
          <el-table-column prop="true_name"
                           label="领养人姓名"
                           width="140" />
          <el-table-column prop="phone"
                           label="联系方式"
                           width="140" />
          <el-table-column prop="petname"
                           label="宠物名字"
                           width="160" />
          <el-table-column label="操作">
            <template #default="scope">
              <el-button size="small"
                         @click="handleEdit(scope.row.pet_id)">详情</el-button>
              <el-button size="small"
                         type="danger"
                         @click="handleDelete(scope.row.pet_id,scope.row.adopt_id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-scrollbar>
    </el-main>
    <!-- 宠物信息修改弹出层 -->
    <el-dialog v-model="centerDialogVisible"
               width="500"
               center
               @close="cha"
               :close-on-click-modal="false">

      <div class="pets">
        <div class="petid wenzi">宠物ID：{{ butindex}}</div>
        <div class="img wenzi">
          <div class="tp">
            <span>宠物图片：</span>
            <img :src="petimg"
                 alt="">
          </div>
        </div>
        <div class="name wenzi">
          <div>
            <span>宠物名字：</span>
            <span>{{ petname }}</span>
          </div>
          <div>
            <span>宠物年龄：</span>
            <span>{{ petage }}</span>
          </div>
        </div>

        <div class="leixing wenzi">
          <div>
            <span>宠物类型：</span>
            <span>{{ pettype }}</span>
          </div>
          <div>
            <span>宠物性别：</span>
            <span>{{ petsex}}</span>
          </div>
        </div>

        <div class="jueyu wenzi">
          <div>
            <span>是否绝育：</span>
            <span>{{ petsterilization }}</span>
          </div>
          <div>
            <span>是否打疫苗：</span>
            <span>{{ pethealth}}</span>
          </div>
        </div>

        <div class="quyu wenzi">
          <div>
            <span>发现区域：</span>
            <span>{{ petregion }}</span>
          </div>
        </div>
        <div class="miaoshu wenzi">
          <div>
            <span>宠物描述：</span>
            <span>{{ petbriefing }}</span>
          </div>
        </div>
        <div class=" wenzi">
          <div>
            <span>领养人姓名：</span>
            <span>{{ true_name }}</span>
          </div>
          <div>
            <span>领养人电话：</span>
            <span>{{ phone }}</span>
          </div>
        </div>
        <div class=" wenzi">
          <div>
            <span>领养人地址：</span>
            <span>{{ address }}</span>
          </div>

        </div>
        <div class=" wenzi">
          <div>
            <span>领养时间：</span>
            <span>{{ adopt_time }}</span>
          </div>

        </div>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary"
                     @click="cha()">
            关闭
          </el-button>
        </div>
      </template>
    </el-dialog>
    <!-- 删除宠物弹出层 -->
    <el-dialog v-model="shan"
               :close-on-click-modal="false"
               :title="Warning"
               width="500"
               center>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="shan = false,butindex=''">取消</el-button>
          <el-button type="primary"
                     @click="shanchu()">
            确定
          </el-button>
        </div>
      </template>
    </el-dialog>
  </el-container>
</template>



<script setup>
import { onMounted, ref } from 'vue'
import { ElMessage } from 'element-plus'
import axios from '@/axios'
let list = ref([])
let userlist = ref([])
//搜索
let sousuo = ref('')
const search = () => {
  if (sousuo.value == '') {
    ElMessage({
      message: '搜索内容为空，请重新输入。',
      type: 'error'
    })
  } else {
    userlist.value = list.value.filter((item) => {
      return (
        item.petname.includes(sousuo.value) ||
        item.pet_id == sousuo.value ||
        item.true_name.includes(sousuo.value) ||
        item.phone.includes(sousuo.value)
      )
    })
    if (userlist.value.length == 0) {
      userlist.value = list.value
      ElMessage({
        message: '未找到相关内容，请重新输入。',
        type: 'error'
      })
    }
  }
}
const chongzhi = () => {
  userlist.value = list.value
  sousuo.value = ''
}

// 宠物图片
let petimg = ref('')
// 宠物名字
let petname = ref('')
//宠物性别
let petsex = ref('')
//宠物年龄
let petage = ref('')
//宠物类型
let pettype = ref('')
//宠物绝育
let petsterilization = ref('')
//宠物疫苗
let pethealth = ref('')
//宠物发现区域
let petregion = ref('')
//宠物描述
let petbriefing = ref('')
// 领养人姓名
let true_name = ref('')
// 领养人电话
let phone = ref('')
// 领养人地址
let address = ref('')
// 领养时间
let adopt_time = ref('')
//查看
let butindex = ref('')
let centerDialogVisible = ref(false)

//查看
const handleEdit = (index) => {
  butindex.value = index
  list.value.forEach((item) => {
    if (item.pet_id == index) {
      petimg.value = item.image
      petname.value = item.petname
      petsex.value = item.gender
      petage.value = item.age
      pettype.value = item.breed
      petsterilization.value = item.sterilization
      pethealth.value = item.health
      petregion.value = item.region
      petbriefing.value = item.briefing
      true_name.value = item.true_name
      phone.value = item.phone
      address.value = item.address
      adopt_time.value = item.adopt_time
    }
  })
  centerDialogVisible.value = true
}
const cha = () => {
  centerDialogVisible.value = false
  butindex.value = ''
  petimg.value = ''
  petname.value = ''
  petsex.value = ''
  petage.value = ''
  pettype.value = ''
  petsterilization.value = ''
  pethealth.value = ''
  petregion.value = ''
  petbriefing.value = ''
  true_name.value = ''
  phone.value = ''
  address.value = ''
  adopt_time.value = ''
  sousuo.value = ''
}
//删除
let shan = ref(false)
let adopt_del_id = ref('')
let Warning = ref('')
const handleDelete = (index, id) => {
  butindex.value = index
  adopt_del_id.value = id
  shan.value = true
  Warning.value = `确定删除宠物${index}以及其领养信息吗？`
}
const shanchu = () => {
  axios
    .post('/yilingshan', { pet_id: butindex.value, adopt_id: adopt_del_id.value })
    .then((d) => {
      if (d == `宠物删除成功！`) {
        ElMessage({
          message: `删除成功！`,
          type: 'success'
        })
        setTimeout(() => {
          shan.value = false
          axios
            .get('/yiling')
            .then((d) => {
              //过滤数据
              list.value = d
              userlist.value = list.value
              // console.log(userlist.value)
            })
            .catch((err) => console.log(err))
        }, 100)
      }
    })
    .catch((err) => console.log(err))
  sousuo.value = ''
}

onMounted(() => {
  axios
    .get('/yiling')
    .then((d) => {
      //过滤数据
      list.value = d
      userlist.value = list.value
      // console.log(userlist.value)
    })
    .catch((err) => console.log(err))
})
</script>

<style scoped lang="less">
.sousuo {
  width: 60px;
  height: 32px;
  line-height: 32px;
  border-radius: 16px;
  margin-left: 10px;
  padding: 0 10px;
}
.tian {
  width: 60px;
  height: 32px;
  line-height: 32px;
  border-radius: 16px;
  margin-left: 10px;
  padding: 0 10px;
}
.layout-container-demo .toolbar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  right: 20px;
}
.layout-container-demo .el-header {
  position: relative;
  background-color: #cdbf62;
  color: var(--el-text-color-primary);
}
.pets {
  width: 100%;
  .img {
    display: flex;
    align-items: center;
    .tp {
      display: flex;
      align-items: center;
    }
    .xz_img {
      width: 100%;
      display: flex;
    }
    .dx {
      height: 100px;

      width: 100px;
    }

    ::v-deep .el-upload-list--picture-card .el-upload--picture-card {
      height: 100px;
      width: 100px;
    }
    ::v-deep .el-upload-list--picture-card .el-upload-list__item-actions .el-upload-list__item {
      height: 100px !important;
      width: 100px !important;
    }
    img {
      width: 150px;
      height: 80px;
    }
  }
  .wenzi {
    width: 100%;
    display: flex;
    justify-content: space-between;
    margin: 5px 0;
    padding: 5px 10px;
    border-bottom: 1px solid #666;
  }
  .wenzi:hover {
    background-color: #eee;
  }
}
</style>
